<template>
	<view :class="themeName">
		<navbar title="订单详情"></navbar>
		<view class="order-detail">

			<view class="box">

				<view class="head-title">{{$zhTran('商品详情')}}</view>

				<!-- 商品 -->
				<view class="contain order-goods">
					<view v-for="(goodsItem, goodsIndex) in goodsList" :key="goodsIndex">
						<goods-card :key="goodsIndex" shape="rectangle" :name="goodsItem.goods_name"
							:image="goodsItem.goods_image" :contain-style="{ height: '280rpx' }" :fieldShowHide="{}"
							:image-style="{ width: '180rpx', height: '180rpx' }"
							@tap="goGoodsDetail(goodsItem.goods_id)">
							<view class="flex-1" slot="default">
								<u-gap height="80"></u-gap>
								<view class="m-t-10 flex row-between">
									<price :content="goodsItem.goods_price" mainSize="32rpx" minorSize="26rpx"
										:prefix="orderInfo.price_symbol" color="rgba(250, 64, 52, 1)" />
									<text class="lighter sm">x{{ goodsItem.goods_num }}</text>
								</view>
							</view>
						</goods-card>
					</view>
				</view>
				<!-- 账单 -->
				<view class="contain order-bill">
					<view class="cell order-bill__item">
						<view class="cell-label">{{$zhTran('商品金额')}}</view>
						<view class="cell-content">
							<price :content="orderInfo.goods_amount" :prefix="orderInfo.price_symbol"
								color="rgba(250, 64, 52, 1)" />
						</view>
					</view>
					<view class="cell order-bill__item">
						<view class="cell-label">{{$zhTran('合计数量')}}</view>
						<view class="cell-content" style="color: rgba(250, 64, 52, 1);">{{orderInfo.total_num}}件</view>
					</view>
					<view class="cell order-bill__item">
						<view class="cell-content">
							<text class="muted m-r-10">{{$zhTran('实付款:')}}</text>
							<price :content="orderInfo.order_amount" mainSize="32rpx" minorSize="24rpx"
								:color="themeColor" :prefix="orderInfo.price_symbol" color="rgba(250, 64, 52, 1)" />
						</view>
					</view>
				</view>
			</view>

			<view class="box">
				<view class="head-title">{{$zhTran('客户信息')}}</view>

				<view class="m-t-30">
					<view class="user-title">{{$zhTran('客户名称')}}</view>
					<view class="user-text u-border-bottom">{{orderInfo.user_name}}</view>
					<view class="user-title">{{$zhTran('联系电话')}}</view>
					<view class="user-text u-border-bottom">{{orderInfo.user_phone}}</view>
				</view>
			</view>

			<u-gap height="100"></u-gap>
			<!-- Order Operational -->
			<view class="operational">
				<view class="order-button order-button--primary" @click="handleVerificationPickup"
					v-if="!orderInfo.verification_status">{{$zhTran('核销')}}</view>
				<view class="order-button order-button--disabled" v-else>{{$zhTran('已核销')}}</view>
			</view>

			<!-- 页面状态 -->
			<page-status :status="pageStatus">
				<template #error>
					<u-empty :text="$zhTran('订单异常')"
						:src="$getImageUri('resource/image/shopapi/uniapp/empty/order.png')" :icon-size="280"></u-empty>
				</template>
			</page-status>

			<u-popup v-model="verificationCodeShow" mode="center" width="80%">
				<view class="verification-code">
					<view class="title flex col--center row-center">{{$zhTran('请输入订单核销码')}}</view>
					<view class="text">
						<u-input :placeholder="$zhTran('请输入11位核销码')" border :value="verification_code"
							@input="inputVerificationCode"></u-input>
					</view>
					<view class="flex btns">
						<view class="confirm p-20" @click="verificationOrder(verification_code,3)">{{$zhTran('确定')}}
						</view>
						<view class="cancel p-20" @click="cancel">{{$zhTran('取消')}}</view>
					</view>
				</view>
			</u-popup>
		</view>
		<u-action-sheet-circle :list="list" :tips="tips" v-model="verificationShow" @click="actionSheet">
		</u-action-sheet-circle>
	</view>
</template>

<script>
	import {
		apiCommunityGroupPurchaseLeaderVerification,
		apiCommunityGroupPurchaseOrderDetail
	} from "@/api/community_group_purchase";
	import OrderMixin from "@/mixins/community_group_purchase_order";
	import {
		PageStatusEnum,
		PaymentStatusEnum,
	} from "@/utils/enum";

	export default {
		name: "CGPOrderDetail",
		data() {
			return {
				// 页面状态
				pageStatus: PageStatusEnum["LOADING"],
				order_id: "", // 订单ID
				orderInfo: {}, // 订单信息
				goodsList: [], // 商品列表
				verification_code: '',
				verificationCodeShow: false,
				tips: {
					text: this.$zhTran('请选择订单核销方式'),
					color: 'rgba(56, 56, 56, 1)',
					fontSize: 28,
				},
				list: [{
					text: this.$zhTran('直接核销'),
					color: 'rgba(56, 56, 56, 1)',
					fontSize: 28,
					icon: 'checkmark-circle',
					iconColor: '#fff',
					iconSize: 32,
					iconBgColor: 'rgba(255, 141, 26, 1)',
					iconBgSize: 64,
					iconCircleColor: '#fff6ed',
					iconCircleSize: 138,
				}, {
					text: this.$zhTran('扫码核销'),
					color: 'rgba(56, 56, 56, 1)',
					fontSize: 28,
					icon: 'scan',
					iconSize: 32,
					iconColor: '#fff',
					iconBgColor: 'rgba(64, 115, 250, 1)',
					iconBgSize: 64,
					iconCircleColor: '#f2f6ff',
					iconCircleSize: 138,
				}, {
					text: this.$zhTran('输入核销码'),
					color: 'rgba(56, 56, 56, 1)',
					fontSize: 28,
					icon: 'edit-pen',
					iconSize: 32,
					iconColor: '#fff',
					iconBgColor: 'rgba(51, 175, 41, 1)',
					iconBgSize: 64,
					iconCircleColor: '#eff9ee',
					iconCircleSize: 138,
				}],
				verificationShow: false,
			};
		},

		computed: {},

		methods: {
			// 刷新订单数据
			refreshOrderData() {
				return apiCommunityGroupPurchaseOrderDetail({
						id: this.order_id,
					})
					.then((ndata) => {
						let data = this.$zhTran(ndata)
						this.orderInfo = data;
						this.goodsList = data.order_goods;
						return Promise.resolve(data);
					})
					.catch((err) => {
						return Promise.reject(err);
					});
			},
			handleVerificationPickup() {
				this.verificationShow = true
			},
			actionSheet(event) {
				if (event === 0) {
					// 直接核销
					this.verificationOrder(this.orderInfo.pickup_code, 1)
				} else if (event === 1) {
					// 扫码核销
					this.scanCode();
				} else if (event === 2) {
					// 输入核销码
					this.verification_code = ''
					this.verificationCodeShow = true;
				}
			},
			scanCode() {
				var that = this,
					themeColor = this.themeColor
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success(res) {
						that.verificationOrder(res.result, 2)
					},
					fail(res) {
						console.log(res)
						// app.alertModal('调用摄像头失败', 2)
					}
				})
			},
			inputVerificationCode(val) {
				this.verification_code = val
			},
			cancel() {
				this.verificationCodeShow = false
				this.verification_code = ''
			},
			verificationOrder(code, flag) {
				var that = this
				console.log('code', code)
				if (code == '' && flag == 3) {
					this.$toast({
						title: this.$zhTran('请填写核销码')
					})
					return
				}

				if (code != this.orderInfo.pickup_code) {
					this.$toast({
						title: this.$zhTran('核销码不匹配')
					})
					return
				}

				uni.showModal({
					content: this.$zhTran('确定核销该订单？'),
					confirmColor: this.themeColor,
					confirmText: this.$zhTran('确定'),
					success(res2) {
						if (res2.confirm) {
							apiCommunityGroupPurchaseLeaderVerification({
								code,
							}).then(() => {
								that.refreshOrderData()
							}).finally(() => {
								that.verificationShow = false
								that.verificationCodeShow = false
							})
						}
					}
				})
			},
			exchangeAct() {
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/community_group_purchase/leader/exchange_activity",
					events: {
						resetCgpId(res) {
							that.cgp_id = res.cgp_id
							that.refreshOrderData()
						}
					},
				});
			}
		},

		async onLoad() {
			const options = this.$Route.query;

			try {
				if (!options.order_id) throw new Error(this.$zhTran("订单异常"));
				this.order_id = options.order_id;
				await this.refreshOrderData();
				this.pageStatus = PageStatusEnum["NORMAL"];
			} catch (err) {
				console.log(err);
				this.pageStatus = PageStatusEnum["ERROR"];
			}

			// 监听全局duringPayment事件
			uni.$on("duringPayment", ({
				result
			}) => {
				if (result === PaymentStatusEnum["SUCCESS"]) {
					this.$Router.back();
					setTimeout(() => {
						this.$toast({
							title: this.$zhTran("支付成功"),
						});
					}, 0.5 * 1000);
					this.refreshOrderData();
				}
			});
		},

		onUnload() {
			uni.$off("duringPayment");
		},
	};
</script>

<style lang="scss" scoped>
	.order-detail {
		background-size: 100% 15%;
		background-repeat: no-repeat;
		padding: 30rpx;
		position: relative;

		.box {
			background-color: #ffffff;
			border-radius: 7px;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.head-title {
				color: rgba(0, 0, 0, 1);
				font-size: 32rpx;
				font-weight: bold;
			}

			.user-title {
				color: rgba(38, 38, 38, 1);
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.user-text {
				color: rgba(153, 153, 153, 1);
				font-size: 28rpx;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
			}
		}

		.contain {
			margin-top: 20rpx;
			border-radius: 7px;
			background-color: #ffffff;
		}

		// 单元格
		.cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $-font-size-nr;

			&-label {
				width: 142rpx;
			}

			&-content {
				flex: 1;
				display: flex;
				align-items: center;
			}
		}
	}

	.order-goods {
		&__handle {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 20rpx 20rpx 20rpx;

			&-button {
				padding: 8rpx 30rpx;
				border: $-solid-border;
				border-radius: 60px;
				font-size: $-font-size-sm;
			}
		}
	}

	.order-bill {
		padding: 20rpx;

		&__item {
			height: 60rpx;

			.cell-content {
				justify-content: flex-end;
			}
		}
	}

	.order-info {
		padding: 20rpx;

		&__item {
			height: 60rpx;
		}
	}

	.operational {
		box-sizing: border-box;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20rpx constant(safe-area-inset-bottom) 20rpx;
		padding: 0 20rpx env(safe-area-inset-bottom) 20rpx;
		border-top: $-solid-border;
		background-color: #ffffff;

		.order-button {
			box-sizing: border-box;
			padding: 20rpx 0;
			width: 100%;
			font-size: 28rpx;
			text-align: center;
			border-radius: 2px;
			font-size: $-font-size-nr;

			&--primary {
				background-color: rgba(255, 208, 0, 1);
				color: rgba(74, 25, 0, 1);
			}

			&--disabled {
				background-color: #d8d8d8;
				color: rgba(74, 25, 0, 1);
			}
		}
	}

	.verification-code {
		color: rgba(38, 38, 38, 1);
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #FFFFFF;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			margin: 50rpx 0;
		}

		.text {
			margin: 80rpx 30rpx;
		}

		.btns {
			&>view {
				width: 50%;
				text-align: center;
			}

			.confirm {
				background-color: rgba(255, 208, 0, 1);
			}

			.cancel {
				background-color: rgba(244, 246, 249, 1);
			}
		}
	}
</style>